<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器和插件</title>
</head>

<body>
    <div id="app">
        <h3>测试过滤器单个参数</h3>
        <p>{{ content | contentFilter }}</p>
        <input type="text" :value=" content | contentFilter ">
        <hr>
        <h3>测试过滤器多个参数</h3>
        <p>{{ javaScore | add(vueScore,pythonScore) }}</p>
        <input type="text" :value="javaScore | add(vueScore,pythonScore)">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 全局过滤器
        // Vue.filter('contentFilter', function (value) {
        //     if (!value) {
        //         return ''
        //     }
        //     return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**')
        // })
        new Vue({
            el: '#app',
            data: {
                content: '小伙子，你TMD就是个大SB！！！',
                javaScore: 99,
                vueScore: 88,
                pythonScore: 77
            },
            filters: {
                // 定义局部过滤器
                contentFilter(value) {
                    if (!value) {
                        return ''
                    }
                    return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**')
                },
                add(num1, num2, num3) {
                    // num1 其实就是 | 左边的数据
                    return num1 + num2 + num3;
                }
            }
        })
    </script>
</body>

</html>